<template>
  <div class="app-container">
    <div v-if="isAuthorized">
      <el-card class="wechat-info-card">
        <div slot="header" class="clearfix">
          <span>微信公众号基础信息</span>
          <el-button style="float: right" type="primary" @click="setConfig">修改配置</el-button>
        </div>
        <el-row>
          <el-col :span="24">
            <el-form label-width="120px">
              <el-form-item label="公众号名称">
                <span>{{ wechatInfo.open.nick_name }}</span>
              </el-form-item>
              <el-form-item label="AppID">
                <span>{{ wechatInfo.app_id }}</span>
              </el-form-item>
              <el-form-item label="Secret">
                <span>{{ wechatInfo.secret }}</span>
              </el-form-item>
              <el-form-item label="Token">
                <span>{{ wechatInfo.token }}</span>
              </el-form-item>
              <el-form-item label="AES Key">
                <span>{{ wechatInfo.aes_key }}</span>
              </el-form-item>
              <el-form-item label="logo">
                <el-image :src="wechatInfo.headimg" />
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="wechat-info-card margin-top-sm">
        <div slot="header" class="clearfix">
          <span>微信公众号授权信息</span>
          <el-button style="float: right" type="primary" @click="authorize">重新授权</el-button>
        </div>
        <el-row>
          <el-col :span="24">
            <el-form label-width="120px">
              <el-form-item label="appid">
                <span>{{ open.authorizer_appid }}</span>
              </el-form-item>
              <el-form-item label="access_token">
                <span>{{ open.authorizer_access_token }}</span>
              </el-form-item>
              <el-form-item label="refresh_token">
                <span>{{ open.authorizer_refresh_token }}</span>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-collapse v-model="activeNames" @change="handleChange">
              <el-collapse-item title="已授权功能" name="1">
                <el-tag
                  v-for="(func, index) in open.func_info"
                  :key="index"
                  class="margin-right-sm"
                  type="success"
                >
                  {{ func }}
                </el-tag>
              </el-collapse-item>
            <!-- 其他功能项可以继续添加 -->
            </el-collapse>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <div v-else>
      <el-button @click="authorize">点击授权</el-button>
    </div>
  </div>
</template>

<script>
import { fetchAuthWechat, fetchConfigInfo, generateQRUrl, registerMiniprogram } from '../api/wx-account'
export default {
  data() {
    return {
      isAuthorized: false, // 初始化为未授权状态
      wechatInfo: {},
      open: {}
    }
  },
  created() {
    if (this.$route.query.auth_code) {
      // 授权成功后，将auth_code传给后端
      fetchAuthWechat({ auth_code: this.$route.query.auth_code }).then(res => {
        console.log('fetchAuthWechat', res)
        this.$message.success('授权成功')
        this.getWeChatInfo()
      }).catch(err => {
        console.log('fetchAuthWechat-err', err)
        this.$message.error('授权失败')
      })
    } else {
      this.getWeChatInfo()
    }
  },
  methods: {
    setConfig() {
      this.$router.push({
        name: 'diandi-subscription-settings-index',
        params: {
          activeName: 'Wechat'
        }
      })
    },
    async authorize() {
      const fullUrl = window.location.href
      const redirect_url = encodeURIComponent(
        fullUrl
      )
      generateQRUrl({ redirect_url: redirect_url }).then((res) => {
        this.url = res.data.url
        window.open(res.data.url, '_self')
      })
    },
    async getWeChatInfo() {
      // 假设这是一个返回Promise的异步函数，用于获取微信公众号信息
      // 这里应该包含与后端交互的逻辑，获取微信公众号的信息
      // 示例中直接返回模拟数据
      fetchConfigInfo().then(res => {
        this.wechatInfo = res.data
        this.open = res.data.open
        this.isAuthorized = !!res.data.id
        console.log('fetchConfigInfo-res', res, this.isAuthorized)// 获取微信公众号信息成功
      }).catch(err => {
        this.isAuthorized = false
        console.log('fetchConfigInfo-err', err)// 获取微信公众号信息失败
      })
    }
  }
}
</script>

<style scoped>
.avatar img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.qrcode img {
  width: 200px;
  height: 200px;
}

.技术参数 ul {
  list-style: none;
  padding: 0;
}

.技术参数 li {
  margin-bottom: 10px;
}
</style>
